<template>
    <div>
            <van-nav-bar
                title="不凡"
                left-text="返回"
                @click-left="onClickLeft"
                fixed
                placeholder 
            /> 

             <van-swipe class="my-swipe" id="swiper-w" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="item in res.gallery" :key="item.allnumber">
                    <img :src="item.img_url" alt="">
                </van-swipe-item>
            </van-swipe>
             <div class="swiper-b">
                        <div class="swiper-p">
                            <p>30天无忧退货</p>
                        </div>
                          <div class="swiper-p">
                            <p>48小时快速退款</p>
                        </div>
                          <div class="swiper-p">
                            <p>满88元免邮</p>
                        </div>

            </div>
            <div class="goods-info">
                    <p>{{info.name}}</p>
                    <p>{{info.goods_brief}}</p>
                    <p>￥{{info.retail_price}}</p>
            </div>
            <!-- 选择弹出层 -->
            <van-cell is-link @click="showPopup" >请选择规格数量</van-cell>
            <van-popup v-model="show" position="bottom" >
                <div class="select">
                    <div class="top">
                            <div class="left-img">
                                    <img :src="info.primary_pic_url" alt="">
                            </div>
                            <div class="right-price">
                                    <p>价格:￥{{info.retail_price}}</p>
                                    <p>请选择数量</p>
                            </div>
                    </div> 
                    <div class="bottom">
                            <p>数量:{{value}}</p>
                            <van-stepper v-model="value"  />
                    </div>

                </div>

                <van-goods-action>
                    <van-goods-action-button
                        type="danger"
                        text="加入到购物车"
                        @click="onClickButton"
                    />
                    </van-goods-action>
            </van-popup>

            <div class="attribute">
                        <div class="head">
                                商品参数
                        </div>
                        <div class="item" v-for="item in res.attribute" :key="item.id">
                            <div class="item-box">
                                <span>{{item.name}} </span>
                                <span>{{item.value}}</span>
                           </div>
                        </div>
                        
                      
            </div>

            <!-- 图片 -->
            <div class="info-img" v-html="info.goods_desc" id="infoimg">
                  
            </div>

            <!-- 包邮问题 -->
            <div class="prompt">
                        <p class="prompt-title">常见问题</p>
                        <div class="prompt-info">
                                <div class="prompt-info1">
                                    <p>购买运费如何收取？</p>
                                    <p> 单笔订单金额（不含运费）满88元免邮费；不满88元，每单收取10元运费。
                                            (港澳台地区需满 </p>
                                </div>
                                <div class="prompt-info1">
                                    <p>使用什么快递发货？</p>
                                    <p>严选默认使用顺丰快递发货（个别商品使用其他快递），配送范围覆盖全国大部分地区（港澳台地区除  </p>
                                </div>
                                <div class="prompt-info1">
                                    <p>如何申请退货？</p>
                                    <p> 1.自收到商品之日起30日内，顾客可申请无忧退货，退款将原路返还，不同的银行处理时间不同，  </p>
                                </div>
                                <div class="prompt-info1">
                                    <p>如何开具发票？</p>
                                    <p> 1.如需开具普通发票，请在下单时选择“我要开发票”并填写相关信息（APP仅限2.4.0及以  </p>
                                </div>
                                
                        </div>
            </div>

            <!-- 大家都在看 -->
            <div class="look">
                        <p class="look-title">-大家都在看-</p>
                        <div class="list-item" v-for="item in res.productList" :key="item.id">
                            <router-link :to="`/goodsinfo?id=${item.id}`">
                            <img :src="item.list_pic_url" alt="" >
                            <p>{{item.name}}</p>
                            <p>￥{{item.retail_price}}</p>
                            </router-link>
                        </div>
                        <div class="list-item2"></div>
                        <div class="list-item2"></div>
                        
                      
            </div>
            <!-- 提交订单栏 -->
            <van-goods-action>
                 <van-goods-action-icon :icon="icon" :text="size" color="#ff5000" @click="sc" />
                 <router-link to="/cart">
                <van-goods-action-icon icon="cart-o" text="购物车" :badge="value" />
                </router-link>
                <van-goods-action-button type="warning" text="加入购物车" @click="addgoods" />
                <van-goods-action-button type="danger" text="立即购买" />
            </van-goods-action>
                

                
               
    </div>
</template>

<script>
import {goodsinfo } from "../../../api/Home/index.js"
import {addgoods , addcollect , cartList } from "../../../api/cart/index.js"
import { mapState} from "../../../store/index.js"
import Vue from 'vue';
import { Toast } from 'vant';

    export default {
            data() {
                return {
                    show:false,
                    value:1,
                    res:[],
                    info:[],
                    icon:"star-o",
                    size:"收藏"

                }
            },
            methods: {
                onClickLeft(){
                    this.$router.go(-1)
                },
                showPopup(){
                        this.show = true
                },
                onClickButton(){
                          var openId = localStorage.getItem("openId")
                            addgoods({
                                goodsId:this.$route.query.id,
                                number:this.value,
                                openId:openId,
                            }).then(res=>{
                                console.log(res);
                                console.log(openId);
                                   if(res.data=="success"){
                                        Toast('添加成功');
                                        this.show = false
                                   }else{
                                        Toast('添加失败,请重新添加');
                                        this.show = false
                                   }
                                  
                            })
                },
                 addgoods(){
                     this.show = !this.show

                 },
                 sc(){
                      var openId = localStorage.getItem("openId")
                        this.icon =this.icon=="star-o"? "star":"star-o"
                        if(this.icon==="star-o"){
                            this.size="收藏"
                          
                                cartList({
                                        openId:openId
                                    }).then(res=>{
                                         console.log(res);
                                    var item = res.collectGoodsList.findIndex(el=>el.id ==this.$route.query.id)
                                    if(item!=-1){
                                        res.collectGoodsList.splice(item,1)
                                         Toast('删除成功');
                                         console.log(res.collectGoodsList);
                                    }else {
                                          Toast('没有删除');
                                           
                                    }
                                })
                        }else{
                            this.size = "已收藏"
                            addcollect({
                                goodsId:this.$route.query.id,
                                openId:openId

                            }).then(res=>{
                                console.log(res);
                                if(res.data==="success"){
                                    Toast('添加收藏成功');
                                   
                                }else {
                                    Toast('收藏失败');
                                }
                            })
                        }
                 }
            },
            created(){
                var openId = localStorage.getItem("openId")
                    goodsinfo({
                                id:this.$route.query.id,
                                openId:openId
                        }).then(res=>{
                            console.log(res,"ssss");
                            this.res = res
                            this.info = res.info
                           if(res.collected==true){
                               this.icon = "star"
                               this.size = "已收藏"
                             
                           }else {
                               this.icon = "star-o"
                               this.size = "收藏"  
                           }
                    })
            },
            computed:{
               
            }
    }
</script>
<style lang="scss" >
    #infoimg {
        p{
            width: 100%;
            margin: -3px;
            img {
                width: 100%;
            }
        }
    }
</style>
<style lang="scss" scoped>
// * {
//     border: 1px solid red;
// }
* {
    margin: 0;
    padding: 0;
}
    
     .my-swipe .van-swipe-item {
           img {
               width: 375px;
               height: 375px;
           }
        }
       
        .swiper-b {
            width: 100%;
            height: .97333rem;
            // background-color: green;
            .swiper-p {
                width: 33.3333%;
                height: 100%;
                // background-color: red;
                float: left;
                p {
                    color: #666;
                    text-align: center;
                    line-height:.97333rem ;

                }
            }
        }
        .goods-info {
            width: 100%;
            height: 154px;
            background-color: #fff;
            :nth-child(1){
                display: block;
                width: 100%;
                font-size: .54667rem;
                text-align: center;
                padding: 10px;
                box-sizing: border-box;
                
            }
            :nth-child(2){
                display: block;
                width: 100%;
                font-size: .32rem;
                color:#999;
                text-align: center;
                padding: 10px;
                box-sizing: border-box;
                
            }
              :nth-child(3){
                display: block;
                width: 100%;
                font-size: .46667rem;
                color:#b4282d;
                text-align: center;
                padding: 10px;
                box-sizing: border-box;

                
            }
        }
        .select {
            width: 100%;
            height: 250px;
            padding: 10px;
            .top {
                width: 100%;
                height: 88.5px;
                // background-color: red;
                .left-img {
                    width: 88.5px;
                    height: 88.5px;
                    // background-color: green;
                    float: left;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
                .right-price {
                    width: 242px;
                    height: 88px;
                    // background-color: gray;
                    float: left;
                    :nth-child(1){
                        margin-top: 20px;
                        margin-left: 10px;
                        color: #b4282d;
                    }
                    :nth-child(2){
                        margin-top: 10px;
                        margin-left: 10px;
                     
                    }
                }
            }
            .bottom {
                // width: 100%;
                height: 56px;
                :nth-child(1){
                    // display: block;
                    // width: 100%;
                    font-size: 18px;
                    margin-bottom: 10px;
                }
                 
            }
        }
        .attribute {
            width: 100%;
            height: 356px;
                background-color: #fff;

            .head {
                width: 100%;
                font-size: .50667rem;
                font-weight: 500;
                padding: 10px;
                box-sizing: border-box;
            }
            .item {
                width: 100%;
                // height: 37px;
                padding: 10px;
                box-sizing: border-box;
                background-color: #fff;
                margin-top: 20px;
                .item-box {
                    width: 97%;
                    // height: 37px;
                    margin: 0 auto;
                    display: flex;
                    justify-content: space-between;
                    background-color: #f4f4f4;
                :nth-child(1) {
                    display: block;
                    width: 100px;
                    height: 100%;
                    font-size: .333rem;
                    color: #999;
                    line-height: 37px;
                }
                :nth-child(2) {
                    display: block;
                    width: 330px;
                    height: 100%;
                    margin-left: 3px;
                    font-size: 10px;
                    line-height: 37px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;

                    }
                }
            }
        }
        .info-img {
            width: 100%;
            // height: 100px;
            margin-top: 8px;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .prompt {
            width: 100%;
            height: 343px;
            margin-top: 10px;
            background-color: #ffffff;
            .prompt-title {
                display: block;
                width: 100%;
                text-align: center;
            }
            .prompt-info {
                width: 100%;
                height: 291px;
                .prompt-info1 {
                    width: 100%;
                    height: 72px;
                    padding: 5px;
                    box-sizing: border-box; 
                    :nth-child(1){
                        color: #303030;
                    }
                      :nth-child(2){
                        color: #787878;
                    }
                }
            }
        }
        .look {
            width: 100%;
             display: flex;
            justify-content: space-around;
            align-content: space-between;
            flex-wrap: wrap;
                .look-title {
                    display: block;
                    width: 100%;
                    height: 20px;
                    padding: 5px;
                    text-align: center;
                }
                .list-item {
                    width: 180px;
                    height: 214px;
                    background-color: #ffffff;
                    margin-top: 5px;
                   
                    img {
                        display: block;
                        width: 151px;
                        height: 151px;
                        margin: 0 auto;
                        // background-color: green;
                    }
                    :nth-child(2){
                        display: block;
                        width: 100%;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        font-size: 12px;
                        // text-align: center;
                        padding: 0.1rem;
                        color: #333;
                        box-sizing: border-box;
                    }
                    :nth-child(3){
                        display: block;
                        width: 100%;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        font-size: 12px;
                        color: #9c3232;
                        padding: 3px;;
                        box-sizing: border-box;
                    }
                }
                .list-item2 {
                    width: 180px;
                }
               
        }
        .van-goods-action {
            z-index: 99;
        }
</style>